
{% load static %}

<head>
   <link rel="stylesheet" href="{% static 'plugins/bootstrap/bootstrap-3.4.1/css/bootstrap.min.css' %}">
    <title>登陆</title>
    <style>

         .header{
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            padding: 25px 12.5%;
            background: transparent;
            display: flex;
            justify-content: space-between;
            align-items: center;
            z-index: 100;
        }
         .navbar a {
            position: relative;
            font-size: 16px;
            color: #e4e4e4;
            text-decoration: none;
            font-weight: 500;
            margin-right: 30px;
        }
        .navbar a::after{
            content: '';
            position: absolute;
            left: 0;
            bottom: -6px;
            width: 100%;
            height: 2px;
            background: #e4e4e4;
            border-radius: 5px;
            transform: translateY(10px);
            opacity: 0;
            transition: .5s;
        }
        .navbar a:hover::after{
             transform: translateY(0);
            opacity: 1;
        }
        .error-msg{
            color:red;
            height:9px;
            font-size: 13px;
        }
        .glass-container{
             position: absolute;
             top: 50%;
            left: 50%;
             transform: translate(-50%,-50%);
             width: 75%;
              height: 550px;
            background: url("{% static "images/background.jpg" %}") no-repeat;
             background-size: cover;
             background-position: center;
             border-radius: 10px;
            margin-top: 20px;
        }
        .glass-container .content{
              position: absolute;
              top: 0;
              left: 0;
              width: 58%;
              height: 100%;
              background: transparent;
              padding: 80px;
              color: #e4e4e4;
              display: flex;
              justify-content: space-between;
              flex-direction: column;

          }
           .content .logo{
              font-size: 30px;
          }
          .text-sci h2{
              font-size: 40px;
          }
          .text-sci h2 span{
              font-size: 25px;
              line-height: 1;
          }
          .text-sci p{
              font-size: 16px;
              margin: 20px 0;
          }
          .glass-container .logreg-box{
              position: absolute;
              top: 0;
              right: 0;
              width: calc(100% - 58%);
              height: 100%;
              overflow: hidden;
          }
          .logreg-box .form-box {
              position: absolute;
              display: flex;
              justify-content: center;
              align-items: center;
              width: 100%;
              height: 100%;
              background: transparent;
              backdrop-filter: blur(20px);
              border-top-right-radius: 10px;
              border-bottom-right-radius: 10px;
              color: #e4e4e4;
          }
        .background{
            background-image: url("{% static "images/background.jpg" %}");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            height: 100vh;
            filter: blur(10px);
            width: 100%;
        }
        body{
            background: #020410;

        }
        .form-box.login {
        display: flex;
        flex-direction: column; /* Make it a column layout */
        align-items: center;
        }

        .form-box .form-group{
           /*font-size: 17px;
           font-weight: 500;
          margin: -15px 0 15px;
          display:flex;
           justify-content: space-between;*/
            padding-left: 60px;
            padding-right: 60px;
            width: 100%;
            margin-bottom: 15px;
       }
        .form-box .col-md-6 {
            flex: 0 0 calc(50% - 10px);
            padding-left: 0;
        }
        #btnSms {
            width: 100%; /* Adjust the spacing between the button and the input */
        }
        .btn {

            height: 45px;
            background: brown;
            border: none;
            outline: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            color: #e4e4e4;
            font-weight: 500;
            box-shadow: 0 0 10px rgba(0,0,0,.5);
        }

        .btn:hover{
            background: black;
            color: white;
        }
        a:hover{
            color: #afd9ee;
        }

    </style>
    <title></title>
</head>




<body>

  <header class="header">
        <nav class="navbar">
            <a href="#">点餐系统</a>
            <a href="/restaurant/home">返回</a>
        </nav>


    </header>
<div class="background"></div>
<div class="glass-container" id="glass">
<form method="post" novalidate>
       <div class="content">
            <h2 class="logo"><i class='bx bxl-firebase'></i>吧唧吧唧美食工坊</h2>
            <div class="text-sci">
                <h2>Welcome!<br><span>To our little shop.</span></h2>
                <p>品味美食，畅享吧唧吧唧，美味从工坊开始！</p>
            </div>
        </div>
    <div class="logreg-box">
    <div class="form-box login">
    <h2>短信验证码登录</h2>
        {% csrf_token %}
        {% for field in form %}
            {% if field.name == 'code' %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>

                        <div class="clearfix">
                            <div class="col-md-6" style="padding-left: 0;">{{ field }}<div class="error-msg">{{ field.errors.0 }}</div></div>
                            <div class="col-md-6"><input type="button" id="btnSms" class="btn btn-default"
                                                         value="获取验证码">
                            </div>
                        </div>
                    </div>
                {% else %}
            <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {{ field }}
                    <div class="error-msg">{{ field.errors.0 }}</div>
                    </div>
            {% endif %}
        {% endfor %}
<div>
        </div>
        <div style="text-align: center">
            <input id="btnSubmit" type="submit" class="btn btn-primary" value="登录"/>
        </div>
        <div style="text-align: center; font-size: 1.2em; margin-top: 1em;">
            <a href="{% url 'register' %}">注册</a>
            <a href="{% url 'login' %}">密码登陆</a>
        </div>
    </div>
    </div>
    </form>
</div>

<script src="{% static 'plugins/js/jquery-3.6.0.min.js' %}"></script>
<script src="{% static 'plugins/bootstrap/bootstrap-3.4.1/js/bootstrap.min.js' %}"></script>
    <script>
    btnSms_click()
console.log('dianji')


      function btnSms_click(){
 $('#btnSms').click(function(){
        $('.error-msg').empty();
     {#获取输入的手机号码#}
     var mobile_phone=$('#id_mobile_phone').val();
console.log(mobile_phone)
     $.ajax({
         {#请求的路由地址#}
         url:"/user/sms/code/",
         type:"GET",
         data:{
            mobile_phone:mobile_phone,
             tpl:"login",
         },
         dataType:"JSON",
         success:function(res){
             if (res.status) {
          sendSmsRemind(); }
             else {
 // 错误信息
  console.log(res.err);
                 // {status:False, error:{ mobile_phone: ["错误信 息"，],code: ["错误信息"，] } }
    $.each(res.error, function (key, value) {
    {#key：字段名#}
    $("#id_" + key).next().text(value[0]);
      }) }
         }

     })


 })
    }
function sendSmsRemind() {
 var $smsBtn = $('#btnSms');
 $smsBtn.prop('disabled', true); // 禁⽤
 var time = 60;
 var remind = setInterval(function () {
 $smsBtn.val(time + '秒重新发送');
 time = time - 1;
 if (time < 1) {
 clearInterval(remind);
 $smsBtn.val('点击获取验证码').prop('disabled', false);
 }
 }, 1000) }

    </script>

</body>
</html>
